<template>
  <a-spin :spinning="confirmLoading">
    <a-form-model ref="form" :model="models" :rules="validatorRules">
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="studentType" required label="学生类别">
        <a-radio-group name="tenantStatus" v-model="model.studentType">
          <a-radio value="小学生">小学生</a-radio>
          <a-radio value="中学生">中学生</a-radio>
          <a-radio value="大学生">大学生</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="content" required label="选择内容">
        <a-radio-group name="tenantStatus" v-model="model.content">
          <a-radio value="正文">正文</a-radio>
          <a-radio value="标题">标题</a-radio>
          <a-radio value="灵感">灵感</a-radio>
          <a-radio value="大纲">大纲</a-radio>
          <a-radio value="开头段">开头段</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="genre" required label="作文载体">
        <a-radio-group name="tenantStatus" v-model="model.genre">
          <a-radio value="记叙文">记叙文</a-radio>
          <a-radio value="抒情文">抒情文</a-radio>
          <a-radio value="议论文">议论文</a-radio>
          <a-radio value="说明文">说明文</a-radio>
          <a-radio value="应用文">应用文</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="tone" required label="选择语气">
        <a-radio-group name="tenantStatus" v-model="model.tone">
          <a-radio value="有说服力">有说服力</a-radio>
          <a-radio value="正式得体">正式得体</a-radio>
          <a-radio value="专业">专业</a-radio>
          <a-radio value="幽默">幽默</a-radio>
          <a-radio value="热情">热情</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="language" required label="选择语言">
        <a-radio-group name="tenantStatus" v-model="model.language">
          <a-radio value="中文">中文</a-radio>
          <a-radio value="英文">英文</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="keyword" required label="作文关键词/主题">
        <a-textarea
          :rows="5"
          v-model="models.keyword"
          placeholder="输入要写的内容的主题或者关键词。比如：祖国强大，繁荣昌盛"
        />
      </a-form-model-item>
      <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" prop="wordNumber" required label="字数要求">
        <a-input-number placeholder="请输入字数(<=1000)" v-model="model.wordNumber"/>
      </a-form-model-item>
    </a-form-model>
  </a-spin>
</template>

<script>
export default {
  name: 'NewMedia',
  components: {},
  props: {
    model: {
      type: Object,
      default: {},
    },
  },

  data() {
    return {
      addIconShow: true,
      shoppIngIcon: '',
      models: this.model,
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
      },
      validatorRules: {
        keyword: [
            { required: true, message: '请输入作文关键词/主题!' },
            { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
          ],
      },
    }
  },

  created() {},
  computed: {
    models1() {
      return this.models
    },
  },
  watch: {
    models1: {
      handler(newVal, oldVal) {
        // console.log('newVal + oldVal',newVal, oldVal)
        // console.log('handler',newVal,  this.model)
        if (!newVal.studentType) {
          //只需判断一个即可
          this.$set(this.model, "studentType", "小学生");
          this.$set(this.model, "content", "正文");
          this.$set(this.model, "genre", "记叙文");
          this.$set(this.model, "tone", "有说服力");
          this.$set(this.model, "language", "中文");
          this.$set(this.model, "wordNumber", "300");
          
        }
      },
      deep: true,
      immediate: true,
    },
  },
  updated() {},
  mounted() {
    this.$nextTick(function () {
      console.log('11111111111111111', this.models)
    })
  },
  methods: {
    generatedBtnProp() {
      let obj = {
        studentType: this.models.studentType,
        content: this.models.content,
        genre: this.models.genre,
        tone: this.models.tone,
        language: this.models.language,
        keyword: this.models.keyword,
        wordNumber: this.models.wordNumber,
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$emit('appApiAsk', 1, obj)
        } else {
          this.$emit('appApiAsk', 2, obj)
        }
      })
    },
  },
}
</script>

<style lang="less">
</style>